<template>
  <div class="reviews-container">
    <h2>商品评价 ({{ reviews.length }})</h2>
    
    <div v-if="reviews.length > 0" class="review-list">
      <div v-for="review in reviews" :key="review.date" class="review-item">
        <div class="review-header">
          <div class="stars">
            <span v-for="n in 5" :key="n" class="star" :class="{ active: n <= review.rating }">
              ⭐
            </span>
          </div>
          <span class="review-date">{{ formatDate(review.date) }}</span>
        </div>
        
        <div class="review-content">{{ review.comment }}</div>
        
        <div v-if="review.images && review.images.length" class="review-images">
          <img 
            v-for="(img, index) in review.images" 
            :key="index" 
            :src="img" 
            @click="showImage(img)"
          >
        </div>
      </div>
    </div>
    
    <div v-else class="no-reviews">
      暂无评价，快来抢沙发吧！
    </div>

    <!-- 图片预览 -->
    <div v-if="previewImage" class="image-preview" @click="previewImage = null">
      <img :src="previewImage">
    </div>
  </div>
</template>

<script>
export default {
  name: 'ReviewList',
  props: {
    productId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      reviews: [],
      previewImage: null
    }
  },
  created() {
    this.loadReviews()
  },
  methods: {
    loadReviews() {
      const allReviews = JSON.parse(localStorage.getItem('reviews') || '[]')
      this.reviews = allReviews
        .filter(review => review.productId === this.productId)
        .sort((a, b) => new Date(b.date) - new Date(a.date))
    },
    formatDate(dateStr) {
      return new Date(dateStr).toLocaleDateString('zh-CN')
    },
    showImage(img) {
      this.previewImage = img
    }
  }
}
</script>

<style scoped>
.reviews-container {
  margin-top: 30px;
}

.reviews-container h2 {
  margin-bottom: 20px;
  color: #333;
}

.review-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.review-item {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.stars {
  display: flex;
  gap: 2px;
}

.star {
  opacity: 0.3;
}

.star.active {
  opacity: 1;
}

.review-date {
  color: #999;
  font-size: 14px;
}

.review-content {
  color: #333;
  line-height: 1.6;
  margin-bottom: 15px;
}

.review-images {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.review-images img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s;
}

.review-images img:hover {
  transform: scale(1.05);
}

.no-reviews {
  text-align: center;
  color: #999;
  padding: 40px 0;
}

.image-preview {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  cursor: pointer;
}

.image-preview img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}
</style> 